<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px;">
      <div style="display:flex;justify-content:space-between;">
        <div>
          <el-button type="primary" icon='el-icon-circle-plus-outline' @click="addClick()">分发软件</el-button>
          <span style="color:#d2d7e3;font-size:25px;margin-top:10px;padding-left:10px;">
            <el-tooltip class="item" effect="dark" placement="right">
              <i class="el-icon-question"></i>
              <div style="width: 450px;" slot="content">
                注意事项：<br>
                1、参数验证：不同软件的静默安装参数差异较大，建议在虚拟机中测试参数，避免生产环境错误。<br>
                2、权限要求：静默安装通常需要管理员权限。<br>
                3、程序要求：确保安装程序支持静默安装，安装包名称避免使用汉字。
                4、如果软件安装时间比较长或需要在线安装的软件不建议使用存在文件、存在注册表项、添加/删除文件名称等三项判断标准，可能出现因条件不满足误判。
              </div>
            </el-tooltip>
          </span>
        </div>
      </div>
      <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="calc(100vh - 155px)">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column label="软件名称" prop="Name" show-overflow-tooltip></el-table-column>
        <el-table-column label="软件大小" prop="FileSize" show-overflow-tooltip></el-table-column>
        <el-table-column label="适用系统" show-overflow-tooltip prop="OSClass"></el-table-column>
        <el-table-column label="系统类型" show-overflow-tooltip prop="OSType">
          <template slot-scope="{row}">
            {{ row.OSType == '' ? '全部' : row.OSType }}
          </template>
        </el-table-column>
        <el-table-column label="运行参数" show-overflow-tooltip prop="RunParam"></el-table-column>
        <el-table-column label="软件描述" show-overflow-tooltip prop="Descp"></el-table-column>
        <el-table-column label="安装成功标准" width="120px" show-overflow-tooltip prop="DeviceObjType">
          <template slot-scope="{row}">
            {{ row.SuccessStandard === 0 ? '执行就成功' : row.SuccessStandard === 1 ? '存在指定文件' : row.SuccessStandard === 2 ?
              '存在指定注册表项' : '添加/删除程序名称' }}
          </template>
        </el-table-column>
        <el-table-column label="应用对象类型" show-overflow-tooltip prop="DeviceObjType" width="120px">
          <template slot-scope="{row}">
            <span>{{ DeviceObjTypeFormatter(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应用对象" show-overflow-tooltip prop="DeviceObj" width="160px">
          <template slot-scope="{row}">
            <span>{{ getDeviceObjDisplay(row, DepartmentList, AssetsList) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分发时间" show-overflow-tooltip prop="CreateTime"></el-table-column>
        <el-table-column label="执行总数" prop="TotalDeviceCount" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="执行成功数量" prop="ExecSuccessCount" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column label="执行失败数量" prop="ExecFailCount" width="120" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column label="执行状态" show-overflow-tooltip prop="ExecDeviceCount"  >
          <template slot-scope="{row}">
            {{row.Status}}
            <span :style="{color: row.Status === 0 ? '#909399' : row.Status === 1 ?'#67C23A':'F56C6C'}">{{ row.Status === 0 ? '等待执行' : row.Status === 1 ?'执行成功':'执行失败' }} </span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="changeClick(scope.row, scope.$index)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog top="15px" :close-on-click-modal="false" :close-on-press-escape=false
      :title="Action === 1 ? '分发软件' : '分发软件'" :visible.sync="dialogVisible" v-el-drag-dialog width="800px">
      <el-form label-width="130px" :model="accountForm" :rules="rules" ref="accountForm" class="ruleDialogForm">
        <el-row class="ruleMain">
          <el-divider content-position="left">规则基本内容</el-divider>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='软件名称：' prop="Name">
              <el-input v-model.trim="accountForm.Name" :disabled="Action !== 1" :maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='适用系统：' prop="OSClass">
              <el-select v-model="accountForm.OSClass" style="width:100%" placeholder="请选择适用系统">
                <el-option label="Windows" value="Windows"></el-option>
                <!-- <el-option  label="Mac" value="Mac"></el-option>
                <el-option  label="Android" value="Android"></el-option>
                <el-option  label="Linux" value="Linux"></el-option> -->
                <el-option label="Other" value="Other"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='系统类型：' prop="OSType">
              <el-select v-model="accountForm.OSType" style="width:100%" placeholder="请选择系统类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="64" value="64"></el-option>
                <el-option label="32" value="32"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='运行参数：' prop="RunParam">
              <el-input v-model="accountForm.RunParam" maxlength="1024"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='' prop="RunAsCurrentUser">
              <el-checkbox v-model="accountForm.RunAsCurrentUser" :true-label="1" :false-label="0">以当前登录用户身份运行 (勾选后，软件将以当前用户的权限运行；否则以系统服务权限运行)</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='分发时间：' prop="CreateTime">
              <el-time-picker v-model="accountForm.CreateTime" placeholder="请选择分发时间" format="HH:mm" value-format="HH:mm"
                style="width:100%"></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label="软件描述：" prop="Descp">
              <el-input placeholder="请输入软件描述" type="textarea" maxlength="50" :rows="3"
                v-model="accountForm.Descp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='成功条件：' prop="SuccessStandard">
              <el-radio v-model="accountForm.SuccessStandard" :label="0">执行就成功</el-radio>
              <el-radio v-model="accountForm.SuccessStandard" :label="1">存在文件</el-radio>
              <el-radio v-model="accountForm.SuccessStandard" :label="2">存在注册表项</el-radio>
              <el-radio v-model="accountForm.SuccessStandard" :label="3">添加/删除程序名称</el-radio>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label="对应参数：" prop="SuccessParam">
              <el-input :disabled="accountForm.SuccessStandard == 0" placeholder="请输入对应参数" type="textarea" :rows="3"
                v-model="accountForm.SuccessParam"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <device-object-selector :form.sync="accountForm" />
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label='上传软件：'>
              <el-upload class="upload-demo" action="#" multiple ref="upload" :accept="'.exe,.msi'"
                :on-change="filechange" :http-request="uploadFile" :on-preview="handlePreview" :on-remove="handleRemove"
                :before-remove="beforeRemove" :before-upload="beforeAvatarUpload" :limit="1" :on-exceed="handleExceed"
                :disabled="Action === 2" :file-list="fileList">
                <el-button size="small" type="primary"  @click="checkBeforeClick">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog top="5vh" :close-on-click-modal="false" :close-on-press-escape=false title="分发详情"
      :visible.sync="DistributeDialog" v-el-drag-dialog width="1000px">
      <el-table stripe border :data="DistributeData" style="width: 100%; margin-top: 15px" height="550">
        <el-table-column label="序号" width="80" type="index"
          :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
        <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
        <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
        <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
        <el-table-column label="执行时间" width="160" show-overflow-tooltip prop="CreateTime">
          <template slot-scope="{row}">
            <span>{{ !row.CreateTime ? '等待执行' : row.CreateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" width="100" prop="Status" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span :style="{ color: row.Status == 0 ? 'rgb(96, 98, 102)' : row.Status == 1 ? '#67C23A' : '#F56C6C' }">{{
              row.Status === 0 ? '等待执行' : row.Status === 1 ? '执行成功' : '执行失败' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行结果" prop="Descp"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
        :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="DistributeDialog = false;">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest, uploadfile } from '@/api/firstPage'
import { formatBytes, parseTime, getDeviceObjDisplay, DeviceObjTypeFormatter } from '@/utils/index.js';
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import DeviceObjectSelector from '@/components/DeviceObjectSelector'
export default {
  directives: { elDragDialog },
  components: {
    DeviceObjectSelector
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      FileUUID: '',
      Moder: {},
      tableData: [],
      Action: 1,
      dialogVisible: false,
      controlUpload: true,
      DistributeDialog: false,
      Attach: [],
      DepartmentList: [],
      AssetsList: [],
      fileList: [],
      accountForm: {},
      DeviceObjList: [],
      AssetsList: [],
      DistributeData: [],
      rules: {
        Name: [
          { required: true, message: "请输入软件名称" }
        ],
        OSClass: [
          { required: true, message: "请选择适用系统", trigger: 'change' }
        ]
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.GetDepartment()
    this.GetDevice()
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  methods: {
    DeviceObjTypeFormatter,
    getDeviceObjDisplay,
    // 获取所有部门
    async GetDepartment() {
      const res = await connrequest('GetDepartment')
      this.DepartmentList = res.Data
    },
    // 获取所有资产
    async GetDevice() {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 100000
        },
      }
      const res = await connrequest('GetDevice', data)
      this.AssetsList = res.Data
    },
    async getData() {
      const res = await connrequest('GetSoftwareDispatch')
      res.Data.map(item => {
        item.FileSize = item.FileSize ? formatBytes(item.FileSize) : 0
        // item.CreateTime = parseTime(item.CreateTime)
        return item
      })
      this.tableData = res.Data
    },

    addClick() {
      this.Action = 1
      this.dialogVisible = true
      this.$nextTick(() => {
        this.accountForm = {
          OSType: '',
          OSClass: 'Windows',
          DeviceObjType: 1,
          SuccessStandard: 0,
          RunAsCurrentUser: 0,
          DeviceObj: []
        }
        this.fileList = []
        this.Attach = []
        this.$refs['accountForm'].resetFields();
      })
    },
    async changeClick(row, index) {
      this.Moder = { ...row }
      this.DistributeDialog = true
      this.getModerDetail()
    },
    async getModerDetail() {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          Name: this.Moder.Name
        }
      }
      const res = await connrequest('GetSoftwareDispatchStatus', data)
      this.DistributeData = res.Data
      res.Data.map(item => {
        item.CreateTime = parseTime(item.CreateTime)
        return item
      })
      this.total = res.Paging.TotalCount
    },
    deleteClick(row) {
      this.$confirm('此操作将永久删除该文件分发任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {
          Data: {
            Action: 3,
            Detail: { ...row }
          }
        }
        const res = await connrequest('EditSoftwareDispatch', data)
        if (res.Status.StatusCode === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
          this.dialogVisible = false
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submit() {
      this.$refs['accountForm'].validate(async (valid) => {
        if (valid) {
          if (this.Attach.length !== 1) {
            this.$message.error('请上传软件')
            return false
          }
          if (this.accountForm.DeviceObjType === 2) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择部门')
              return false
            }
          }
          if (this.accountForm.DeviceObjType === 8) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择角色')
              return false
            }
          }
          if (this.accountForm.DeviceObjType === 6) {
            if (!this.accountForm.DeviceObj || this.accountForm?.DeviceObj?.length === 0) {
              this.$message.error('请选择资产')
              return false
            }
          }
          let data = {
            Data: {
              Action: this.Action,
              Detail: {
                ...this.accountForm,
                FileSize: this.FileSize,
                OrigFileName: this.Attach[0].OrigFileName,
                FileUUID: this.FileUUID
                // CreateTime: Date.now()
              }
            }
          }
          // return
          const res = await connrequest('EditSoftwareDispatch', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success('添加分发软件成功')
            this.getData()
            this.dialogVisible = false
          }
        }
      })
    },
    filechange(file, fileList) {
      let arr = []
      fileList.map(item => {
        arr.push({ OrigFileName: item.name })
      })
      this.Attach = arr
    },
    async uploadFile(file) {
      let formData = new FormData();
      formData.append('CmdCode', "UploadFileToTmp");
      formData.append('file', file.file);
      const res = await uploadfile(formData)
      if (res.Status.StatusCode === 0) {
        this.FileSize = file.file.size
        this.FileUUID = res.Data.UUID
        this.$message.success('文件上传成功')
      }
    },
    handlePreview() { },
    async handleRemove(file, fileList) {
      if (this.controlUpload) {
        const data = {
          Data: {
            FileUUID: file.uid
          }
        }
        const res = await connrequest('DeleteSoftwareDispatchAttach', data)
        if (res.Status.StatusCode === 0) {
          this.Attach = this.Attach.filter(item => item.uid !== file.uid);
          this.FileSize = 0
          this.$message.success('文件删除成功')
        }
      }
    },
    beforeRemove(file, fileList) {
      if (this.controlUpload)
        return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeAvatarUpload(file) {
      const typeArry = ['.exe', '.msi'];
      const type = file.name.substring(file.name.lastIndexOf('.'));
      const isTar = typeArry.indexOf(type) > -1;
      if (!isTar) {
        this.controlUpload = false
        this.$message.error('上传文件只能是 exe/msi 格式!');
        return false
      }
      else
        this.controlUpload = true
      return true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    checkBeforeClick(e) {
      if (this.$isFromCenter) {
        e.stopPropagation(); // 阻止 el-upload 弹出选择框
        this.$message.error('当前模式不支持上传文件')
        return
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getModerDetail()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getModerDetail()
    }
  }
}
</script>